<template>
<div>
    <van-nav-bar left-arrow @click-left="onClickLeft" title="输入验证码" />
<span class="b">已发送验证码至 <span class="a">{{form.mobile}}</span></span>

        <van-field
          v-model="form.verify"
          left-icon="volume-o"
          placeholder="请输入短信验证码"
          clearable
          style="font-size:100%"
          :error-message="error.mobile"
        />

          <van-field
            v-model="form.password"
            type="password"
            left-icon="lock"
            placeholder="请设置密码,6-18位数字,字母或字符"
            clearable
          style="font-size:100%"
          :error-message="error.password"
          />

          <van-button round class="btn" @click="getRegist">完成注册</van-button>

</div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)
export default {
  data () {
    return {
      form: {
        mobile: '',
        verify: '',
        password: ''
      },
      error: {
        password: ''
      }
    }
  },
  created () {
    this.form.mobile = sessionStorage.getItem('mobile')
  },
  methods: {
    onClickLeft () {
      this.$router.push('/registe')
    },
    async getRegist () {
      let passwordRe = /^[0-9a-zA-Z_]{6,18}$/
      if (!passwordRe.test(this.form.password)) {
        this.error.password = '密码必须是6~18位数字、字母、下划线'
        return false
      }

      const { data: res } = await this.$http.post('/regist', this.form)
      // console.log(res)
      if (res.ok === 1) {
        this.$router.push('/login')
        Toast.success('注册成功!')
      } else {
        Toast.fail(res.error)
      }
    }
  }
}
</script>

<style lang='less'>
body{
  background-color: #fff;
}
.a{
    color: red;
}
.b{
    margin-left: 15px;
}
.btn {
  color: #fff;
  width: 73%;
  margin-left: 15%;
  margin-top: 15%;
  font-size: 127%;
  background: -webkit-linear-gradient(left,#FA1E8C 0,#FC1E56 100%)
}
</style>
